<template>
    <div style="padding: 10px;">
        <Row class="addHeader">
            <Col span="1">
            <router-link to="/washList">
                <Icon type="ios-arrow-left" size=30></Icon>
            </router-link>
            </Col>
            <Col span="22">
            <p>修改洗衣模式</p></Col>
        </Row>

        <Row class="formBox">
            <Col span="24">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="labelWidth">
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="名称:" prop="mode_name">
                        <Input v-model="formValidate.mode_name" placeholder="请输入名称"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="价格:" prop="mode_price">
                        <Input v-model="formValidate.mode_price" placeholder="请输入价格"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="时间:" prop="mode_duration">
                        <Input v-model="formValidate.mode_duration" placeholder="请输入洗衣时间"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="Icon:" prop="mode_icon">
                        <Input  v-model="formValidate.mode_icon" placeholder="请输入"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="纬度:" prop="device_mode">
                        <Input  v-model="formValidate.device_mode" placeholder="请输入设备模式"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="6">
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
    import {PriceApi} from "../../../static/api/api";

    export default {
        data() {
            return {
                modeId: this.$route.query.id,
                labelWidth: '200',
                formValidate: {
                    mode_name: '',
                    mode_price: '',
                    mode_duration: '',
                    mode_icon: '',
                    device_mode: ''
                },
                ruleValidate: {
                    mode_name: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    mode_price: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    mode_duration: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    mode_icon: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_mode: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ]
                }

            }
        },
        mounted() {
            this.$nextTick(function () {
                console.log(this.modeId)
               this.priceSelect();
            })
        },
        methods: {
            priceSelect() {
                PriceApi.priceSelect(this.modeId).then(res => {
                    console.log(res);
                    this.formValidate.mode_name =res.name;
                    this.formValidate.mode_price=String(res.price);
                    this.formValidate.mode_duration=String(res.duration);
                    this.formValidate.mode_icon=res.icon;
                    this.formValidate.device_mode=res.deviceMode;

                }).catch(err => {

                })
            },

            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var formdata = {
                            id: this.modeId,
                            name: this.formValidate.mode_name,
                            price: this.formValidate.mode_price,
                            duration: this.formValidate.mode_duration,
                            icon: this.formValidate.mode_icon,
                            deviceMode: this.formValidate.device_mode
                        };
                        PriceApi.priceEdit(formdata).then(res => {
                            this.$Message.success('Success!');
                            this.$router.push({path: '/priceList'})

                        }).catch(err => {
                            this.$Message.error('修改失败!');
                        })
                    } else {
                        this.$Message.error('校验失败!');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
<style>
    .addHeader {
        height: 47px;
        border-bottom: 1px dashed #efefef;
    }

    .addHeader p {
        font-size: 20px;
        color: #666666;
        text-align: center;
    }

    .formBox {
        padding-top: 20px;
    }

    .ivu-form-item-label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #495060;
        line-height: 1;
        padding: 10px 12px 10px 0;
        box-sizing: border-box;
        font-weight: 600 !important;
    }

    .roleInfo_body p {
        text-align: center;
        padding-top: 3%;
    }

    .roleInfo_body p.p_role_top {
        text-align: center;
        padding-top: 10% !important;
    }

    .roleInfo_body h6 {
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
        line-height: 80px !important;
    }

    .roleInfo_line p {
        vertical-align: middle
    }


</style>
